import React, { useState } from 'react';
import { obj_empty, obj_bool, GridTable, MsgInfo, WaitUmd, loc_str, urlSpc, cline, obj_str, get_num, for_obj, useCmd, Stable, MainView, useWidth, is_empty, loc } from 'sui';
import { getData, filter_e } from './cmd';
import { get_f, sumSpc, filterN } from '../cmd';
import { NoData, Title, SumN} from '../ctl';
import { Echart } from '../echart';

const SpcView = ({ title, url, mul, ctype=true, yper=false, cfg }) => {
    const [main, setMain] = useState(null);
    const [cur_opt, curOpt] = useState(null);
    const [width] = useWidth(null, 600);
    const umd = useCmd(null, "p");

    const hopt = (v) => {
        umd.startWait();

        let change = false;
        for_obj(v, (k, v) => {
            if (cur_opt[k] === v) {
                return;
            }

            change = true;
        });

        if (change) {
            curOpt(v);
        }

        umd.endWait();
    };

    const hfind = (value, opt) => {
        const cmd = {
            line: cline(),
            tab: obj_str(cfg, "dsn"),
            wsn: obj_str(cfg, "wsn"),
            obj: obj_str(cfg, "fsn"),
            sub: get_num(cfg, "num"),
            start: loc_str(value["t_start"]),
            end: loc_str(value["t_end"]),
        };

        umd.startWait();
        curOpt(opt);
        urlSpc(umd.endWait, url, cmd, r => setMain(r), e => setMain({err: loc("product_39")}));
    };

    const Chart = () => {
        if (is_empty(main)) {
            return null;
        }

        if (main.err) {
            return <NoData err={main.err}/>;
        }

        const opt = {
            s_cl: obj_bool(cur_opt, "cl"),
            s_lcl: obj_bool(cur_opt, "lcl"),
            s_ucl: obj_bool(cur_opt, "ucl"),
            cl: get_f(cfg, "cl"),
            lcl: get_f(cfg, "lcl"),
            ucl: get_f(cfg, "ucl"),
        };

        const edata = filter_e(main, opt, mul, ctype, yper);
        const [head1, col1, head2, col2] = sumSpc(main, url);
        const ndata = filterN(main);
        const [col, row] = getData(main, url);

        const sumView = (k, label) => {
            if (obj_empty(edata)) {
                return;
            }

            const adjust = edata.adj;
            if (obj_empty(adjust)) {
                return;
            }

            if (is_empty(adjust[k])) {
                return null;
            }

            const tmp = adjust[k].map(d => d[0]);

            return <div>{`${loc(label)}: ${tmp.join(",")}`}</div>
        };

        return (
            <div className="mb-6">
                <div className="flex flex-row">
                    <div className="flex flex-col w-1/2">
                        <div className="ml-2 mt-2 text-base flex justify-center">{title}</div>
                        <Echart main={edata} width={width / 2}/>
                        <div className="ml-2 my-2 text-red-400">
                            {sumView("pt_1", "zw_161")}
                            {sumView("pt_3", "zw_162")}
                            {sumView("pt_5", "zw_163")}
                            {sumView("pt_7", "zw_164")}
                        </div>
                    </div>
                    <div className="flex flex-col w-1/2">
                        <div className="ml-2 mt-2 text-2xl flex justify-center">{loc("zw_153")}</div>
                        <div className="flex justify-center">
                            <Echart main={ndata} width={width / 2}/>
                        </div>
                        <div className="mt-2 flex justify-center">
                            <div className="flex flex-row">
                                <SumN main={main}/>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="flex flex-row">
                    <div className="flex flex-col w-1/2">
                        <MsgInfo msg={loc("zw_158")}/>
                        <Stable row={col1} head={head1}/>
                    </div>
                    <div className="flex flex-col w-1/2">
                        <div className="ml-4">
                            <MsgInfo msg={loc("zw_159")}/>
                            <Stable row={col2} head={head2}/>
                        </div>
                    </div>
                </div>
                <MsgInfo msg={loc("zw_154")}/>
                <GridTable col={col} row={row} high={600}/>
            </div>
        );
    };

    return (
        <MainView>
            <Title cfg={cfg} hcmd={hfind} hopt={hopt}/>
            <Chart/>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {SpcView};
